<template>
  <BasicModal @register="registerModal" :title="title" @cancel="emit('success')">
    <div class="import-box">
      <a-upload-dragger
        v-model:file-list="fileList"
        name="file"
        :multiple="true"
        :action="action"
        :beforeUpload="beforeUpload"
        :data="data"
        accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :headers="{ Authorization: `Bearer ${getToken()}` }"
      >
        <img src="/src/assets/images/import.png" />
        <span class="upload-tip">只能上传Excel文件，且不能超过1G</span>
        <span class="upload-text">将文件拖到此处，或<b>点击上传</b></span>
      </a-upload-dragger>
      <a-button size="large" @click="downLoadTemplate">下载模板</a-button>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getAppEnvConfig } from '/@/utils/env';
  import { getToken } from '/@/utils/auth';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { downloadFile } from '/@/api/sys/download';
  import { downloadByData } from '/@/utils/file/download';

  const props = defineProps({
    importUrl: String,
    data: Object,
  });

  const title = ref('');
  const fileList = ref();
  const importType = ref('');
  const { notification } = useMessage();

  const emit = defineEmits(['success', 'register']);
  let downLoadUrl;
  let templateApi;
  let templateTitle;

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    title.value = data.title;
    downLoadUrl = data.downLoadUrl;
    importType.value = data.type;
    templateApi = data.api;
    templateTitle = data.templateTitle;
    fileList.value = [];
    setModalProps({
      destroyOnClose: true,
      maskClosable: false,
      footer: null,
      width: 800,
      height: 500,
    });
  });
  const action = computed(() => {
    return getAppEnvConfig().VITE_GLOB_API_URL + props.importUrl;
  });

  const beforeUpload = (file) => {
    const isFile1000M = file.size / 1024 / 1024 > 1000;
    if (isFile1000M) {
      notification.error({
        message: 'Tip',
        description: '文件大小不能超过1G！',
      });
      return false;
    }
  };

  const downLoadTemplate = async () => {
    const method = importType.value || 'GET';
    let res;
    if (templateApi) {
      res = await templateApi();
    } else {
      res = await downloadFile(downLoadUrl, { isTemplate: true, ...props.data }, method);
    }
    downloadByData(
      res.data,
      `${templateTitle || '模板'}.xlsx`,
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    );
  };
</script>
<style lang="less" scoped>
  .import-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 15px 15px;

    img {
      cursor: pointer;
    }

    .upload-tip {
      position: absolute;
      bottom: 120px;
      right: 57px;
      font-size: 13px;
    }

    .upload-text {
      position: absolute;
      bottom: 55px;
      right: 88px;
      font-weight: 600;
      font-size: 16px;
      color: #000;

      b {
        color: #429fff;
      }
    }
  }

  :deep(.ant-upload.ant-upload-drag) {
    background: #fff;
    border: none;
  }
</style>
